<template>
	<div class="index">
		<div class="center">
			<left></left>
			<div class="right">
		      <top></top>
		      <div class="hei10"></div>
		      <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">
            当前位置：
            <router-link to="/index" style="color: #409eff;">分销后台</router-link>>
            <router-link to="/productionDelivery" style="color: #409eff;">在售商品管理</router-link>>
           推广站点管理
          </div>
		      <div class="hei10"></div>

				<div class="title">推广站点管理</div>
                <div class="siteadminlist" v-loading="loading">

                    <div class="siteadminli" v-for="item in list" :key="item.id">
                        <div class="sitetitle">{{item.name}}</div>
                        <div class="sitetime">{{item.created_at}}</div>
                        <div class="siteflex">
                            <div class="siteedit"><span @click="edit(item.id)">编辑</span> <span @click="delet(item.id)">删除</span></div>
                            <div class="siteadd" @click="go(item.id,item.name)">管理地址</div>
                        </div>
                    </div>

                    <div class="siteadminli siteadminli2" @click="log = true">
                        +新建站点
                    </div>

                </div>
			</div>
		</div>
		<el-dialog title="新建站点" :visible.sync="log" width="440px">
			  <div>
				  <el-input v-model="disid" placeholder="请输入站点名称"></el-input>
			  </div>
			  <span slot="footer" class="dialog-footer">
				<el-button @click="log = false">取消</el-button>
				<el-button type="primary" @click="loggo">确定添加</el-button>
			  </span>
		</el-dialog>

        <el-dialog title="修改站点" :visible.sync="log2" width="440px">
			  <div>
				  <el-input v-model="choose.name" placeholder="请输入站点名称"></el-input>
			  </div>
			  <span slot="footer" class="dialog-footer">
				<el-button @click="log2 = false">取消</el-button>
				<el-button type="primary" @click="loggo2">确定修改</el-button>
			  </span>
		</el-dialog>

		<foot></foot>
	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
	export default{
		components: {
			"left": left,
			"top": top,
			"foot": foot
		},
		name: 'siteadmin',
		data(){
			return{
				msg:"hello",
				loading:true,
                log:false,
                log2:false,

				choose:{},
				disid:"",
				result:"",
				list:"",
				total:0,
				pagesize:20,
				page:1
			}
		},
		created() {
			this.getlist();
		},
		methods:{
            go:function(id,name){
                this.$router.push({ path: "/productionDelivery/marketsite/siteproduct",query: { id: id } });
            },
            getlist:function(){
				var that = this;
				axios.get('/api/plan-market/media/list')
					.then(response => {
						if(response.data.msg.code == 0){
							this.list = response.data.data
							this.loading = false
						}else{
							this.$message.error(response.data.msg.info);
						}
					})
			},
			edit:function(id){
				var that = this;
				axios.get('/api/plan-market/media/info?id='+id)
					.then(response => {
						if(response.data.msg.code == 0){
							that.choose = response.data.data
							that.log2 = true
						}else{
							this.$message.error(response.data.msg.info);
						}
					})
			},
            //删除
            delet:function(id){
                this.$confirm('确认删除此站点吗?', '提示', {
                	  confirmButtonText: '确定',
                	  cancelButtonText: '取消',
                	  type: 'warning'
                }).then(() => {
                	  var that = this
                	  that.loading = true
                	  var params = new URLSearchParams();
                	  params.append('id', id);
                	  axios.post('/api/plan-market/media/delete', params)
                	  	.then(response => {
                	  		if(response.data.msg.code != 0){
                	  			this.$message.error(response.data.msg.info);
                	  		}else{
                	            this.loading = true
                	  			this.$message({
                	  			  message: '删除成功！',
                	  			  type: 'success'
                	  			});
                	  			that.getlist()
                	  		}
                	  	})
                })
            },
			//点击添加
			loggo:function(){
				var that = this;
				axios.post('/api/plan-market/media/add',{name:this.disid})
					.then(response => {
						if(response.data.msg.code == 0){
							that.loading = true
							that.$message({
								message: '添加成功！',
								type: 'success'
							});
							that.log = false
							that.getlist();
						}else{
							this.$message.error(response.data.msg.info);
						}
					})
            },
            loggo2:function(){
				var that = this;
				axios.post('/api/plan-market/media/update',{id:this.choose.id,name:this.choose.name})
					.then(response => {
						if(response.data.msg.code == 0){
							that.loading = true
							that.$message({
								message: '修改成功！',
								type: 'success'
							});
							that.log2 = false
							that.getlist();
						}else{
							this.$message.error(response.data.msg.info);
						}
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index{

				.title{border-bottom: 1px #EAEAEA solid; line-height: 45px; padding-left: 30px; font-size: 16px; background: #F9F9F9; color: #727272}
				.add{ padding: 20px 30px}
                .siteadminlist{ display: flex; padding: 25px; flex-wrap: wrap;}
                .siteadminli{ flex-basis: 260px; height: 135px; background: #77C9FF; box-sizing: border-box; padding:20px 15px;  border-radius: 2px; margin-bottom: 25px; margin-right: 25px;
                    .sitetitle{ font-size: 16px; color: #ffffff;}
                    .sitetime{ font-size: 14px; color: #fff; margin-top: 10px;}
                    .siteflex{ display: flex; justify-content: space-between; margin-top: 25px;}
                    .siteedit{color: #fff; cursor: pointer;}
                    .siteedit span{cursor: pointer;}
                    .siteadd{ background: #FFF; color: #77C9FF; line-height: 28px; width: 85px; text-align: center; border-radius: 3px;  cursor: pointer;}
                }
                .siteadminli:nth-child(4){ margin-right: 0;}
                .siteadminli2{ display: flex; justify-content: center; align-items: center; color: #77C9FF; background: #FFF; border: 1px #77C9FF dashed;}
				.list{
					display: flex; text-align: center; color: #727272; line-height: 45px; margin: 0 20px; border: 1px #EAEAEA solid; margin-top: -1px;
					.th{ flex: 1; background: #F9F9F9; font-size: 14px; border-right:1px #EAEAEA solid;  }
					.td{ flex: 1; font-size: 14px; border-right:1px #EAEAEA solid; }
				}
				.el-pagination{ text-align: right; margin: 20px 0}

		.result{ margin-top: 20px;}
	}
</style>
